<template>
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize"
        :close-on-click-modal="isReadonly">
        <template #header="{ titleId, titleClass }">
            <div class="zs-drawer-header" :id="titleId" :class="titleClass">
                <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
                <div class="zs-title zs-text-black">项目详情</div>
            </div>
        </template>
        <template #default>
            <el-container class="zs-drawer-container">
                <!-- <div> -->
                <el-scrollbar class="zs-drawer-content">
                    <!-- 必要时才定义id 请务必确保id唯一 遵从命名规范 -->
                    <div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-01">
                        <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
                        <div class="zs-title">基本信息</div>
                    </div>
                    <div class="zs-card zs-space-bottom">
                        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
                            <el-form-item label="项目名称：">
                                <el-input v-model="formLabelAlign.name" :disabled="isReadonly" />
                            </el-form-item>
                            <el-form-item label="项目编码：">
                                <el-input v-model="formLabelAlign.region" :disabled="isReadonly" />
                            </el-form-item>
                            <el-form-item label="总建筑面积：">
                                <el-select v-model="formLabelAlign.type" class="zs-full-item"
                                    :placeholder="isReadonly ? ' ' : '请选择'" :disabled="isReadonly">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="复杂：">
                                <div class="zs-align-center">
                                    <el-input class="zs-space-right-sm" v-model="formLabelAlign.region"
                                        :placeholder="isReadonly ? ' ' : '名称'" :disabled="isReadonly">
                                    </el-input>
                                    <el-input class="zs-space-right-sm" v-model="formLabelAlign.region"
                                        :placeholder="isReadonly ? ' ' : '距离'" :disabled="isReadonly"
                                        :class="{ 'zs-input-group-white': !isReadonly }">
                                        <template #append>
                                            <div>米</div>
                                        </template>
                                    </el-input>
                                    <el-button class="zs-btn-square-dashed zs-btn-square-red" :disabled="isReadonly">
                                        <el-icon>
                                            <Minus />
                                        </el-icon>
                                    </el-button>
                                    <el-button class="zs-btn-square-dashed zs-btn-square-blue" :disabled="isReadonly">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </el-button>
                                </div>
                            </el-form-item>


                        </el-form>
                    </div>
                    <div class="zs-card zs-space-bottom">
                        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
                            <el-form-item label="生效时间：">
                                <el-date-picker v-model="timeStart" type="datetime" style="width: 100%;"
                                    :disabled="isReadonly" />
                            </el-form-item>
                            <el-form-item label="失效时间：">
                                <el-date-picker v-model="timeEnd" type="datetime" style="width: 100%;"
                                    :disabled="isReadonly" />
                            </el-form-item>
                            <el-form-item label="生效状态：">
                                <el-select v-model="curStatus" class="zs-full-item" placeholder=" " disabled clearable>
                                    <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="说明：">
                                <el-input v-model="formLabelAlign.region" :maxlength="curTextareaLength" show-word-limit
                                    type="textarea" :autosize="{ minRows: 2 }" :disabled="isReadonly" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="zs-card zs-space-bottom-bg">
                        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
                            <el-form-item label="项目简介：">
                                <el-input v-model="formLabelAlign.region" :maxlength="curTextareaLength" show-word-limit
                                    type="textarea" :autosize="{ minRows: 2 }" :disabled="isReadonly" />
                            </el-form-item>
                            <el-form-item label="租金单价：">
                                <el-input class="zs-input-group-md" v-model="formLabelAlign.region"
                                    :disabled="isReadonly" :class="{ 'zs-input-group-white': !isReadonly }">
                                    <template #append>
                                        <div>元/m²/月</div>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="物业费单价：">
                                <el-input class="zs-input-group-md" v-model="formLabelAlign.type" :disabled="isReadonly"
                                    :class="{ 'zs-input-group-white': !isReadonly }">
                                    <template #append>
                                        <div>元/m²/月</div>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="标准层高：">
                                <el-input class="zs-input-group-md" v-model="formLabelAlign.type" :disabled="isReadonly"
                                    :class="{ 'zs-input-group-white': !isReadonly }">
                                    <template #append>
                                        <div>米</div>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="标准层面积：">
                                <el-input class="zs-input-group-md" v-model="formLabelAlign.type" :disabled="isReadonly"
                                    :class="{ 'zs-input-group-white': !isReadonly }">
                                    <template #append>
                                        <div>m²</div>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="租期要求：">
                                <div class="zs-align-center">
                                    <el-input class="cur-sm-input zs-space-right-sm" v-model="formLabelAlign.region"
                                        :disabled="isReadonly">
                                    </el-input>
                                    <span class="zs-text-gray-light zs-space-right-sm">-</span>
                                    <el-input class="zs-input-group-md" v-model="formLabelAlign.region"
                                        :disabled="isReadonly" :class="{ 'zs-input-group-white': !isReadonly }">
                                        <template #append>
                                            <div>年</div>
                                        </template>
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="面积要求：">
                                <div class="zs-align-center">
                                    <el-input class="cur-sm-input zs-space-right-sm" v-model="formLabelAlign.region"
                                        :disabled="isReadonly">
                                    </el-input>
                                    <span class="zs-text-gray-light zs-space-right-sm">-</span>
                                    <el-input class="zs-input-group-sm" v-model="formLabelAlign.region"
                                        :disabled="isReadonly" :class="{ 'zs-input-group-white': !isReadonly }">
                                        <template #append>
                                            <div>㎡</div>
                                        </template>
                                    </el-input>
                                    <el-checkbox class="zs-space-left-sm" label="无要求" size="large" />
                                </div>
                            </el-form-item>
                            <el-form-item label="临街长度：">
                                <div class="zs-align-center">
                                    <el-input class="cur-sm-input zs-space-right-sm" v-model="formLabelAlign.region"
                                        :disabled="isReadonly">
                                    </el-input>
                                    <span class="zs-text-gray-light zs-space-right-sm">-</span>
                                    <el-input class="zs-input-group-sm" v-model="formLabelAlign.region"
                                        :disabled="isReadonly" :class="{ 'zs-input-group-white': !isReadonly }">
                                        <template #append>
                                            <div>m</div>
                                        </template>
                                    </el-input>
                                    <el-checkbox class="zs-space-left-sm" label="无要求" size="large" />
                                </div>
                            </el-form-item>
                        </el-form>

                    </div>
                    <!-- 必要时才定义id 请务必确保id唯一 遵从命名规范 -->
                    <div class="zs-align-center zs-space-top-lg zs-space-bottom" id="sm-drawer-demo-card-02">
                        <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
                        <div class="zs-title">扩展信息</div>
                    </div>
                    <div class="zs-card zs-space-bottom">
                        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
                            <el-form-item label="对外展示：">
                                <el-radio-group v-model="radio1" :disabled="isReadonly">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="项目配套：">
                                <el-checkbox-group v-model="checkList" :disabled="isReadonly">
                                    <el-checkbox label="1">便利店</el-checkbox>
                                    <el-checkbox label="2">大型超市</el-checkbox>
                                    <el-checkbox label="3">餐饮娱乐</el-checkbox>
                                    <el-checkbox label="4">电影院</el-checkbox>
                                    <el-checkbox label="5">咖啡厅</el-checkbox>
                                    <el-checkbox label="6">商业配套</el-checkbox>
                                    <el-checkbox label="7">健身房</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="项目标签：">
                                <el-checkbox-group v-model="checkList" :disabled="isReadonly">
                                    <el-checkbox label="1">近地铁</el-checkbox>
                                    <el-checkbox label="2">可注册</el-checkbox>
                                    <el-checkbox label="3">精装修</el-checkbox>
                                    <el-checkbox label="4">商圈中心</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="zs-align-center zs-space-top-lg zs-space-bottom" id="sm-drawer-demo-card-03">
                        <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
                        <div class="zs-title">附件上传</div>
                    </div>
                    <div class="zs-card">
                        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
                            <el-form-item label="图片上传：">
                                <el-upload v-model:file-list="fileList" action="" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                                    :disabled="isReadonly">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>

                                <el-dialog v-model="dialogVisible">
                                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="附件上传：">
                                <el-upload class="upload-demo" drag action="" multiple :disabled="isReadonly">
                                    <el-icon class="el-icon--upload">
                                        <upload-filled />
                                    </el-icon>
                                    <div class="el-upload__text">
                                        将文件拖住到此处，或<em>点击上传</em>
                                    </div>
                                    <template #tip>
                                        <div class="zs-text-gray zs-text-sm">
                                            *系统仅支持上传100mb以内的txt、ppt、xls、doc、pdf、jepg、bmp、gif、rar、zio、格式文件。
                                        </div>
                                    </template>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-scrollbar>
                <!-- </div> -->
                <DocWrapper v-if="isShowDrawer" :nodeList="curNodeList"></DocWrapper>
            </el-container>
        </template>
        <!-- 详情抽屉 footer可以不要 根据实际需求定-->
        <template #footer>
            <div>
                <!-- <el-button class="zs-btn-md zs-btn-plain" plain @click="cancelClick">取消</el-button> -->
                <el-button class="zs-btn-md zs-btn-primary" @click="confirmClick">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import DocWrapper from '@/components/DocWrapper.vue'
// import { ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
let store = useStore()
const curDrawerSize = ref(store.state.uiDrawerSize)
const curTextareaLength = ref(store.state.uiTextareaLength)

const props = defineProps({
    isShow: { type: Boolean, default: false },
    isReadonly: { type: Boolean, default: true },
})
const emit = defineEmits(['close'])

const timeStart = ref('2022-09-01 00:00:00')
const timeEnd = ref('2100-12-31 23:59:59')

const curStatus = ref('1')
const statusList = ref([
    { value: '1', label: '有效' },
    { value: '0', label: '失效' },
])


console.log('接收到父级传来的数据')
console.log(props.isShow)

const isShowDrawer = ref(props.isShow)

watch(
    () => props.isShow,
    (newVal, oldVal) => {
        console.log('监听基本类型数据testStr')
        console.log('new', newVal)
        console.log('old', oldVal)
        isShowDrawer.value = newVal
    }
)

const handleClose = (done) => {
    emit('close', { isShow: false })
    done()
}
// function cancelClick() {
//     isShowDrawer.value = false
//     emit('close', { isShow: false })
// }
function confirmClick() {
    isShowDrawer.value = false
    emit('close', { isShow: false })
    // ElMessageBox.confirm(`Are you confirm to chose ? ?`)
    //     .then(() => {
    //         isShowDrawer.value = false
    //         emit('close', { isShow: false })
    //     })
    //     .catch(() => {
    //         // catch error
    //     })
}

const labelPosition = ref('right')
const formLabelAlign = reactive({
    name: '111',
    region: '222',
    type: '333',
})

const radio1 = ref('1')
const checkList = ref(['1', '2'])
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    }
]

// -------- 上传 相关 start --------
const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'plant-1.png',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'plant-2.png',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'figure-1.png',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'figure-2.png',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}
// -------- 上传 相关 end --------
const curNodeList = ref([
    { name: '基本信息', id: 'sm-drawer-demo-card-01' },
    { name: '扩展信息', id: 'sm-drawer-demo-card-02' },
    { name: '附件上传', id: 'sm-drawer-demo-card-03' },
])

</script>

<style scoped lang="scss">
.cur-sm-input {
    max-width: 100px;
}
</style>
